<template>
  <div id="detail">
    <detail-nav-bar class="detail-navbar"  ref="detailnav" @gettoother="get2other"></detail-nav-bar>
    <Scroll class="detail-scroll" ref="scroll"
            @scrollpos="changeshow" :pull-up-load="true">



      <detail-swiper :topimage="topImg"></detail-swiper>
      <detail-info :info="bookinfo" ></detail-info>
      <detail-shop :shops="shopinfo"></detail-shop>
      <detail-goods-info :detailInfo="dgoodsinfo" @dgiloaded="imload"></detail-goods-info>
      <detail-goods-param ref="detailparam" :paramInfo="goodsparam"></detail-goods-param>
      <detail-comments ref="detailcomment" :commentInfo="commentInfo"></detail-comments>
      <goods-list ref="detailrecommend" :goods="recommends"></goods-list>
    </Scroll>
    <BackTop @click.native="back2top" v-show="backtopshow" ></BackTop>
    <detail-bottom-bar @addcart="addtocart"></detail-bottom-bar>
  </div>
</template>

<script>


  //网络请求
  import {getdetail,getrecommend,Goodsinfo,Shopinfo,GoodsParam} from "network/detail"

  //子组件
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailInfo from "./childComps/DetailInfo";
  import DetailShop from "./childComps/DetailShop";

  import Scroll from "components/common/scroll/Scroll";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailGoodsParam from "./childComps/DetailGoodsParam";
  import DetailComments from "./childComps/DetailComments";
  import GoodsList from "../../components/content/goods/GoodsList";
  import {backtopMixin, itemlistenerMixin} from "../../common/mixin";
  import DetailBottomBar from "./childComps/DetailBottomBar";

  import {mapActions} from 'vuex'


  export default {

  name: "detail",

  components: {
    DetailBottomBar,
    GoodsList,
    DetailComments,
    DetailGoodsParam,
    DetailGoodsInfo,
    Scroll,
    DetailShop,
    DetailInfo,
    DetailSwiper,
    DetailNavBar,

  },



    data(){
    return{
      id:null,
      topImg:[],
      bookinfo:{},
      shopinfo:{},
      dgoodsinfo:{},
      goodsparam:{},
      commentInfo:{},
      recommends:[],
      eachTopOffset:[],
      backtopshow:false


    }
  },
    mixins:[itemlistenerMixin,backtopMixin],

  created()
  {
    this.id = this.$route.params.id
    getdetail(this.id).then(res => {
      console.log(res);

      const data = res.result
      this.topImg = data.itemInfo.topImages
      // for (let key in res.result.itemInfo.topImages){
      //   this.topImg.push("http:"+res.result.itemInfo.topImages[key])
      // }
      // console.log(this.topImg)
      this.bookinfo = new Goodsinfo(data.itemInfo,data.columns,data.shopInfo.services)
      this.shopinfo = new Shopinfo(data.shopInfo)
      this.dgoodsinfo = data.detailInfo
      this.goodsparam = new GoodsParam(data.itemParams.info,data.itemParams.rule)

      this.commentInfo = data.rate
    })
    getrecommend().then(res => {
      this.recommends = res.data.list
    })
  },
  methods:{
    ...mapActions(['addCart']),
    imload(){
      this.$refs.scroll.refresh()
      this.eachTopOffset=[]
      this.eachTopOffset.push(0)
      this.eachTopOffset.push(this.$refs.detailparam.$el.offsetTop-44)
      this.eachTopOffset.push(this.$refs.detailcomment.$el.offsetTop-44)
      this.eachTopOffset.push(this.$refs.detailrecommend.$el.offsetTop-44)
      this.eachTopOffset.push(Number.MAX_VALUE)
      // console.log(this.eachTopOffset);
    },
    changeshow(pos){

      const posy = -pos.y
      this.backposlistener(posy)
      const lenth = this.eachTopOffset.length

      for (let i = 0 ; i<lenth-1 ; i++)
      {

        if (this.currentIndex !== i&&(posy >= this.eachTopOffset[i] && posy <this.eachTopOffset[i+1]))
        {

          this.$refs.detailnav.currentindex = i
        }

      }

    },

    get2other(index){

      this.$refs.scroll.backtotop(0,-this.eachTopOffset[index],200)

    },

    addtocart(){
      const cartitem = {}
      cartitem.img = this.topImg[0]
      cartitem.iid = this.id
      cartitem.intro = this.bookinfo.desc
      cartitem.title = this.bookinfo.title
      cartitem.price = this.bookinfo.realPrice
      console.log(cartitem.price);
      this.addCart(cartitem).then(res => {
        this.$toast.show(res)
      })
    }


  },


    destroyed() {
      this.$bus.$off('imageloaded',this.itemImgListener)
    }
  }
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 9;
    background-color: #fff ;
    height: 100vh;


  }

  .detail-navbar{
    background-color: #ffffff;
    position: relative;
    z-index: 9;
  }

  /*calc有问题*/
  .detail-scroll{
    height:calc(100% - 44px);
    overflow: hidden;
    /*height:50%*/
    /*position: absolute;*/
    /*top: 44px;*/
    /*bottom: 58px;*/
  }




</style>
